<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>父组件向子组件传值</title>
	<link rel="stylesheet" href="./libs/bootstrap.css">
</head>
<body>
	<div class="container"></div>
</body>
<script src="./libs/16.2.0/react.js"></script>
<script src="./libs/16.2.0/react-dom.js"></script>
<script src="./libs/16.2.0/babel.js"></script>
<script type="text/babel">

	//父组件
	class Website extends React.Component{
		constructor(props){
			super(props);
			this.state={
				title:props.title,
				link:props.link
			};
		}
		render(){
			return <div className='well'>
				<h3>父组件加载完毕</h3>
				<Title name="百度"/>
				<Link url="https://www.baidu.com"/>
			</div>
		}
	}	

	//子组件1
	class Title extends React.Component{
		constructor(props){
			super(props);
		}

		render(){
			return <div>网站名称：{this.props.name}</div>
		}
	}

	//子组件2
	class Link extends React.Component{
		constructor(props){
			super(props);
		}
		render(){
			return <div>网站地址：<a target="_blank" href={this.props.url}>{this.props.url}</a></div>
		}
	}

	ReactDOM.render(
		<Website/>,
		document.querySelector('.container')
	);

	
</script>
</html>